<!DOCTYPE html>
<html>
<head>
<title></title> <@h.head />
<style type="text/css">
body {
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}

.minicolors-theme-bootstrap .minicolors-swatch {
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 1px;
}
.minicolors-position-bottom .minicolors-panel {
    top: 23px;
}
.minicolors-theme-bootstrap .minicolors-input {
    padding-left: 24px;
}
</style>
</head>
<body>
	<form action="${path}/carousel/save" id="fm" method="post" enctype="multipart/form-data" class="definewidth m20">
		<input type="hidden" value="${(carousel.id)!0}" name="id">
		<div style="text-align: center;" id="errorMsg">${msg!}</div>
		<table class="table table-bordered table-hover definewidth m10">
			<tr>
				<td width="10%" class="tableleft">标题</td>
				<td><input type="text" name="title" class="disabled" value="${(carousel.title)!}"/></td>
			</tr>
			<tr>
				<td class="tableleft">描述 </td>
				<td><textarea rows="3" cols="*" name="content">${(carousel.content)!}</textarea></td>
			</tr>
			<tr>
				<td class="tableleft">文字颜色</td>
				<td><input type="text" name="fontColor" value="${(carousel.fontColor)!}"></td>
			</tr>
			<tr>
				<td class="tableleft">
					<#if (carousel)??>
						<a target="_blank" href="${imgBgPath!}">背景/视频</a>
						<input type="hidden" name="imgBg" value="${(carousel.imgBg)!}"/>
					<#else>背景/视频<span class="required">*</span></#if>
				</td>
				<td><input type="file" name="imgBgFile" accept="image/jpeg,image/png,video/mp4" <#if !(carousel)??>datatype="*"</#if> nullmsg="请选择背景图或视频！"/>
					<span class="tips">推荐1400*730</span>
				</td>
			</tr>
			<tr>
				<td class="tableleft">
					<#if (imgLayerPath)??>
						<a target="_blank" href="${imgLayerPath!}">浮层</a>
						<input type="hidden" name="imgLayer" value="${(carousel.imgLayer)!}"/>
						<a title="删除" class="delimg${(carousel.imgLayer)!}" href="javascript:delImg('${(carousel.id)!}','${(carousel.imgLayer)!}')">
							<img src="${path}/static/image/delete.png">
						</a>
					<#else>浮层</#if>
				</td>
				<td><input type="file" name="imgLayerFile" accept="image/jpeg,image/png"/>
					<span class="tips">推荐500*730</span>
				</td>
			</tr>
			<tr>
				<td class="tableleft">链接</td>
				<td><input type="text" name="layerLink" value="${(carousel.layerLink)!}"/></td>
			</tr>
			<tr>
				<td class="tableleft">排序<span class="required">*</span></td>
				<td><input type="text" name="sort" datatype="n" value="${(carousel.sort)!}"/></td>
			</tr>
			<tr>
				<td class="tableleft"></td>
				<td>
					<button type="submit" class="btn btn-primary" type="button">保存</button>
					&nbsp;&nbsp;
					<button type="button" class="btn btn-success" name="backid"
						id="backid">返回列表</button>
				</td>
			</tr>
		</table>
	</form>
	<@h.foot />
<script type="text/javascript">
	$(function() {
		$('#backid').click(function() {
			window.location.href = "${path}/carousel/list";
		});
	});
	$(function() {
		$("[name=layerLink]").blur(function() {
			if($(this).val().trim()!="" && !$(this).val().startsWith("http") && !$(this).val().startsWith("https")) {
				$(this).val("http://" + $(this).val());
			}
		});
		
		$("[name=fontColor]").minicolors({
			control: $(this).attr('data-control') || 'hue',
			defaultValue: $(this).attr('data-defaultValue') || '',
			inline: $(this).attr('data-inline') === 'true',
			opacity: $(this).attr('data-opacity'),
			change: function(hex, opacity) {
				if( !hex ) return;
				if( opacity ) hex += ', ' + opacity;
			},
			theme: 'bootstrap'
		});
	});
	$("#fm").Validform({
		tiptype : 3,
		postonce : true
	});
	
	function delImg(id,fileId) {
		$.ajax({type:"post",
			   url : "${path}/carousel/deleteImg",
			   data : {'id':id,'fileId':fileId},
			   dataType : "json",
			   success : function(result){
				   if (result.status == 0) {
					   $(".delimg" + fileId).parent().html($(".delimg" + fileId).parent().text());
				   } else {
					   alert(result.msg);
				   }
			   }
		});
	}
</script>
</body>
</html>